<template>
  <div>
    {{message}}
  </div>
</template>

<script>
export default {
  name: 'Home',
  // data 函数用于定义组件的响应式数据
  data() {
    return {
      message: '首页' 
    };
  },
  computed: {},
  methods: {
  },
  created() {
    // 这里可以添加初始化逻辑，例如发起异步请求等
  },
  // 常用生命周期钩子
  // beforeMount 在组件挂载到 DOM 之前调用，此时模板编译已完成，但 DOM 元素还未插入到页面中
  // 可用于进行一些初始化操作，如设置定时器、发起异步请求等
  beforeMount() {
    // 这里可以添加在挂载前执行的逻辑
  },
  // mounted 在组件已经挂载到 DOM 上后调用，此时可以访问到 DOM 元素
  // 适合进行依赖于 DOM 的操作，如获取元素尺寸、绑定事件监听器等
  mounted() {
    // 这里可以添加依赖 DOM 的操作逻辑
  },
  // beforeUpdate 在组件更新之前调用，当响应式数据发生变化，虚拟 DOM 重新渲染之前触发
  // 可用于在更新前保存一些数据状态
  beforeUpdate() {
    // 这里可以添加在更新前执行的逻辑
  },
  // updated 在组件更新完成后调用，此时虚拟 DOM 已经重新渲染并更新到实际 DOM 中
  // 可用于在更新后进行一些操作，如访问更新后的 DOM 元素
  updated() {
    // 这里可以添加在更新后执行的逻辑
  },
  // beforeUnmount 在组件卸载之前调用，此时组件实例仍然完全正常
  // 可用于清理一些副作用，如清除定时器、解绑事件监听器等
  beforeUnmount() {
    // 这里可以添加卸载前的清理逻辑
  },
  // unmounted 在组件已经完全卸载后调用，所有的事件监听器和子实例都已经被销毁
  // 通常用于执行一些最终的清理工作
  unmounted() {
    // 这里可以添加最终的清理逻辑
  },

  // 不常用生命周期钩子
  // activated 当使用 <keep-alive> 包裹组件时，组件被激活时调用
  // 可用于在组件被激活时恢复状态或执行一些初始化操作
  activated() {
    // 这里可以添加组件激活时的逻辑
  },
  // deactivated 当使用 <keep-alive> 包裹组件时，组件被停用时调用
  // 可用于在组件被停用时保存状态或执行一些清理操作
  deactivated() {
    // 这里可以添加组件停用的逻辑
  },
  // errorCaptured 当捕获到子孙组件抛出的错误时调用
  // 可用于统一处理组件树中的错误，避免错误导致整个应用崩溃
  // 返回 false 可以阻止错误继续向上传播
  errorCaptured(err, instance, info) {
    // 这里可以添加错误处理逻辑
    return false; // 阻止错误向上传播
  },
  // renderTracked 当组件渲染过程中进行依赖跟踪时调用，每个响应式依赖被跟踪时触发
  // 可用于调试，了解组件渲染时的依赖关系
  renderTracked(event) {
    // 这里可以添加调试相关逻辑
  },
  // renderTriggered 当组件渲染过程中依赖的响应式数据发生变化，触发重新渲染时调用
  // 可用于调试，了解组件重新渲染的触发原因
  renderTriggered(event) {
    // 这里可以添加调试相关逻辑
  }
};
</script>

<style scoped>
/* 这里可添加自定义样式，scoped 表示样式只作用于当前组件 */
</style>